<template>
    <div>
        <div class="page-header">
            <Row>
                <Col span="5">
                    <Input  placeholder="姓名"  clearable style="width: 200px" />
                </Col>
                <Col span="5">
                    <Input  placeholder="身份证号" clearable style="width: 200px" />
                </Col>
                <Col span="4">
                    <Button type="primary" class="lyx-mr10" >查询</Button>
                </Col>
            </Row>
        </div>
        <div class="page-content">
            <Row>
                <Col span="24" class="lyx-mb10">
                    <Table border ref="selection" :columns="columns4" :data="data1" @on-selection-change="tableSelectChange">
                        <template  slot="action">
                            <Button type="primary" size="small" style="margin-right: 5px" @click="serach">查询详情</Button>
                        </template>
                    </Table>
                </Col>
            </Row>
            <Row type="flex" justify="space-between" class="lyx-mb10">
                <Col span="12">
                    <Page :total="100" show-total />
                </Col>
            </Row>
            <!--            逝者信息-->
            <Modal v-model="modal1" title="逝者信息详情" @on-ok="ok1" @on-cancel="cancel1" width="60">
                <div class="detail">
                    <Divider orientation="left">逝者信息</Divider>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">逝者姓名:</span>
                            <span>王春秀</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">户口所在地:</span>
                            <span>辽宁省沈阳市沈河区</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">逝者年龄:</span>
                            <span>67</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">逝者性别:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;男</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">出生日期:</span>
                            <span>1963/01/01</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">逝者职业:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;教师</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">死亡时间:</span>
                            <span>2019/05/02</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">死亡原因:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;病逝</span>
                        </Col>
                    </Row>
                    <Divider orientation="left">经办人信息</Divider>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">火化单位:</span>
                            <span>东山陵园</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">安葬方式:</span>
                            <span>花坛葬</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">骨灰安放:</span>
                            <span>寄存</span>
                        </Col>
                        <Col span="12">
                            <span class="bold">联系人:</span>
                            <span>&nbsp;&nbsp;&nbsp;&nbsp;王五</span>
                        </Col>
                    </Row>
                    <Row class="p10">
                        <Col span="12">
                            <span class="bold">联系电话:</span>
                            <span>13802312341</span>
                        </Col>
                    </Row>
                </div>
                <div slot="footer">
                    <Button type="error" size="large"   @click="cancel1">关闭</Button>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      modal1: false,
      modal2: false,
      columns4: [
        {
          title: '逝者姓名',
          key: 'death_name'
        },
        {
          title: '身份证号',
          key: 'ID_card',
          width: '180px'
        },
        {
          title: '户口所在地',
          key: 'address'
        },
        {
          title: '安葬方式',
          key: 'burial_methods'
        },
        {
          title: '死亡时间',
          key: 'death_time'
        },
        {
          title: '死亡原因',
          key: 'death_reson'
        },
        {
          title: '操作',
          slot: 'action'
        }
      ],
      data1: [
        {
          death_name: '王春秀',
          ID_card: '210112193601111111',
          address: '沈河区',
          burial_methods: '花坛葬',
          death_time: '2019/05/02',
          death_reson: '病逝'
        },
        {
          death_name: '王爱民',
          ID_card: '210112193601111112',
          address: '铁西区',
          burial_methods: '传统葬',
          death_time: '2019/03/02',
          death_reson: '病逝'
        },
        {
          death_name: '韩壮',
          ID_card: '210112193601111113',
          address: '浑南新区',
          burial_methods: '艺术墓',
          death_time: '2019/01/02',
          death_reson: '病逝'
        },
        {
          death_name: '吴峰',
          ID_card: '210112193601111114',
          address: '沈北新区',
          burial_methods: '树葬',
          death_time: '2019/01/02',
          death_reson: '自然死亡'
        },
        {
          death_name: '王晗',
          ID_card: '210112193601111115',
          address: '于洪区',
          burial_methods: '壁葬',
          death_time: '2019/01/02',
          death_reson: '自然死亡'
        },
        {
          death_name: '刘珊',
          ID_card: '210112193601111116',
          address: '皇姑区',
          burial_methods: '草坪葬',
          death_time: '2019/03/02',
          death_reson: '病逝'
        }
      ],
      states: 0
    }
  },
  methods: {
    handleSelectAll (status) {
      this.$refs.selection.selectAll(status)
    },
    tableSelectChange (selection) {
      console.log(selection)
    },
    delSelect () {

    },
    ok1 () {
      this.$Message.info('Clicked ok')
      this.modal1 = false
    },
    cancel1 () {
      this.$Message.info('Clicked cancel')
      this.modal1 = false
    },
    ok2 () {
      this.$Message.info('Clicked ok')
      this.modal2 = false
    },
    cancel2 () {
      this.$Message.info('Clicked cancel')
      this.modal2 = false
    },
    serach () {
      this.modal1 = true
    }
  }
}
</script>

<style scoped>
    .p10.ivu-row{
        line-height: 25px;
    }
    .page-header{
        margin-bottom: 20px;
    }
    .lyx-mr10{
        margin-right: 10px;
    }
    .lyx-mb10{
        margin-bottom: 10px;
    }
    table tr td{
        width: 150px;
    }
</style>
